<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:  100%;">
<head>
    <title>支出管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	#addPayModal,#editPayModal{margin-top:5%;margin-left:5%;margin-right:5%}
    	#mapAddIncomeModal{}
    	.modal-dialog {
		    width: 1436px;
		    height: 575px;
		    }
    	.second,.third,.forth,.fifth{
            display: none;
        }
        .commonEdit.investEdit,.accidentEdit,.consumeEdit,.otherEdit{
            display: none;
        }
		.container{
			margin-top:100px;
		}
		body{
        	background:transparent;
    	}
    	section{
    		margin:0px 20px;
    	}
    </style>
</head>
<body style="height:100%">
	<section class="content-header">
		<h4>支出管理</h4>
	</section> 
	<section class="content table-content">
		<form class="form-inline" >
		<!-- 工具栏 -->
		<div id="toolbar">
			<input type="button" value="新增支出项" id="addBtn" data-toggle="modal" data-target="#addPayModal" class="btn btn-primary" ></input>
			<input type="button" value="修改支出项" id="editBtn" class="btn btn-success" onclick="editPayItem()"></input>
			<input type="button" value="删除支出项" id="deleteBtn" class="btn btn-info" onclick="deletePayItem()"></input>
			<!-- <input type="button" value="地图添加支出项" id="mapAddBtn" data-toggle="modal" data-target="#mapAddPayModal" class="btn btn-primary"></input> -->
			<input type="button" value="地图添加支出项" id="mapAddBtn" onclick="mapAddBtn()" class="btn btn-warning"></input>
		</div>
		<!-- bootstrapTable -->
		</form>
		<table id="dataGrid">
		</table>
	</section>
	<section class="content" style=" height:40%;">
		<iframe src="/gradesign/map/paypath" style="width:100%;height:100%"></iframe>
	</section>
	
	<div class="modal fade" id="addPayModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">新增支出项</h5>
				</div>
				<div class="modal-body">
					<form id="payModalForm">
					<div class="row">
						<div class="form-group col-md-3" style="display:none">
							<label for="id">ID</label>
							<input type="text" class="form-control" id="id" placeholder="id"/>
						</div>
						<div class="form-group col-md-3">
							<label for="payItem">支出项目</label>
							<input type="text" class="form-control" id="payItem" placeholder="支出项目"/>
						</div>
						<div class="form-group col-md-3">
							<label for="datetimepicker">支出时间</label>
							<div class="input-group date form_date  " id="datetimepicker" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="payDate" placeholder="支出时间" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
						<div class="form-group col-md-3">
				            <label for="payMoney">支出金额</label>
				            <input type="text" id="payMoney" class="form-control" placeholder="支出金额"/>
				        </div>
				        <div class="form-group col-md-3" >
				            <label for="payMember">支出人</label>
				            <select class="form-control" id="payMember" >
				            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				            	<option>所有成员</option>
				            </select>
				            
				            <!-- <input type="text" id="incomeMember" class="form-control" placeholder="收入人"/> -->
				        </div>
					</div>
			    	<div class="row">
			    		<div class="form-group col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label for="payType">支出类型</label>
			                        <select class="form-control" id="payType">
			                            <option>日常支出</option>
			                            <option>投资支出</option>
			                            <option>意外支出</option>
			                            <option>消费支出</option>
			                            <option>其他支出</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			         	<div class="form-group payDiv first col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label class="payTypeLabel">日常支出</label>
			                        <select class="payTypeDetail form-control select-first" id="payCommonDetail">
			                            <option>---请选择日常支出---</option>
			                            <option>住房</option>
			                            <option>饮食</option>
			                            <option>服装</option>
			                            <option>水电</option>
			                            <option>交通</option>
			                            <option>通讯</option>
			                            <option>赡养</option>
			                            <option>其他</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			        	<div class="form-group payDiv second col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payTypeLabel">投资支出</label>
			            	        <select class="payTypeDetail form-control select-second" id="payInvestDetail">
				                        <option>---请选择投资支出---</option>
				                        <option>股票</option>
				                        <option>外汇</option>
				                        <option>基金</option>
				                        <option>彩票</option>
				                        <option>债券</option>
				                        <option>保险</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
				        <div class="form-group payDiv third col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payTypeLabel">意外支出</label>
			            	        <select class="payTypeDetail form-control select-second" id="payAccidentDetail">
				                        <option>---请选择意外支出---</option>
				                        <option>罚单</option>
				                        <option>医疗保健</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
				        <div class="form-group payDiv forth col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payTypeLabel">消费支出</label>
			            	        <select class="payTypeDetail form-control select-second" id="payConsumeDetail">
				                        <option>---请选择消费支出---</option>
				                        <option>购物</option>
				                        <option>旅游</option>
				                        <option>居住</option>
				                        <option>交通通信</option>
				                        <option>文娱教育</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
				        <div class="form-group payDiv fifth col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payTypeLabel">其他支出</label>
			            	       <input class="payTypeDetail form-control select-third" type="text" id="payOtherDetail" placeholder="请输入支出详情"/>
				                </div>
				            </form>
				        </div>
				        <div class="form-group col-md-3">
				            <label for="payTip">支出备注</label>
				            <input type="text" id="payTip" class="form-control" placeholder="备注"/>
				        </div>
			    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetpayModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="submit()">提交</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="editPayModal" tabindex="-1" role="dialog" >
		<div class="modal-diolog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">修改支出项</h5>
				</div>
				<div class="modal-body">
					<form id="payEditModalForm">
					<div class="row">
						<div class="form-group col-md-3" style="display:none">
							<label for="idEdit">ID</label>
							<input type="text" class="form-control" id="idEdit" placeholder="id"/>
						</div>
						<div class="form-group col-md-3">
							<label for="payItemEdit">支出项目</label>
							<input type="text" class="form-control" id="payItemEdit" placeholder="支出项目"/>
						</div>
						<div class="form-group col-md-3">
							<label for="datetimepicker">支出时间</label>
							<div class="input-group date form_date  " id="datetimepickerEdit" data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd">
								<input type="text" class="form-control" id="payDateEdit" placeholder="支出时间" />
								<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
						<div class="form-group col-md-3">
				            <label for="payMoneyEdit">支出金额</label>
				            <input type="text" id="payMoneyEdit" class="form-control" placeholder="支出金额"/>
				        </div>
				        <div class="form-group col-md-3" >
				            <label for="payMemberEdit">支出人</label>
				            <select class="form-control" id="payMemberEdit" >
				            	<option th:each="memberName : ${nameList}" th:text="${memberName.membername}"></option>
				            	<option>所有成员</option>
				            </select>
				            
				            <!-- <input type="text" id="incomeMember" class="form-control" placeholder="收入人"/> -->
				        </div>
					</div>
			    	<div class="row">
			    		<div class="form-group col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label for="payTypeEdit">支出类型</label>
			                        <select class="form-control" id="payTypeEdit">
			                            <option>日常支出</option>
			                            <option>投资支出</option>
			                            <option>意外支出</option>
			                            <option>消费支出</option>
			                            <option>其他支出</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			         	<div class="form-group payDivEdit commonEdit col-md-3">
			                <form role="form">
			                    <div class="form-group">
			                        <label class="payTypeLabel">日常支出</label>
			                        <select class="payTypeDetail form-control select-first" id="payCommonDetailEdit">
			                            <option>---请选择日常支出---</option>
			                            <option>饮食</option>
			                            <option>服装</option>
			                            <option>水电</option>
			                            <option>交通</option>
			                            <option>通讯</option>
			                            <option>赡养</option>
			                            <option>其他</option>
			                        </select>
			                    </div>
			                </form>
			        	</div>
			        	<div class="form-group payDivEdit investEdit col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payTypeLabel">投资支出</label>
			            	        <select class="payTypeDetail form-control select-second" id="payInvestDetailEdit">
				                        <option>---请选择投资支出---</option>
				                        <option>股票</option>
				                        <option>外汇</option>
				                        <option>基金</option>
				                        <option>彩票</option>
				                        <option>债券</option>
				                        <option>保险</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
				        <div class="form-group payDivEdit accidentEdit col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payTypeLabel">意外支出</label>
			            	        <select class="payTypeDetail form-control select-second" id="payAccidentDetailEdit">
				                        <option>---请选择意外支出---</option>
				                        <option>罚单</option>
				                        <option>医疗保健</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
				        <div class="form-group payDivEdit consumeEdit col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payTypeLabel">消费支出</label>
			            	        <select class="payTypeDetail form-control select-second" id="payConsumeDetailEdit">
				                        <option>---请选择消费支出---</option>
				                        <option>购物</option>
				                        <option>旅游</option>
				                        <option>居住</option>
				                        <option>交通通信</option>
				                        <option>文娱教育</option>
				                        <option>其他</option>
				                    </select>
				                </div>
				            </form>
				        </div>
				        <div class="form-group payDivEdit otherEdit col-md-3">
			            	<form role="form">
			            	    <div class="form-group ">
			             	       <label class="payOtherDetailEdit">其他支出</label>
			            	       <input class="payTypeDetail form-control select-third" type="text" id="payOtherDetailEdit" placeholder="请输入支出详情"/>
				                </div>
				            </form>
				        </div>
				        <div class="form-group col-md-3">
				            <label for="payTipEdit">支出备注</label>
				            <input type="text" id="payTipEdit" class="form-control" placeholder="备注"/>
				        </div>
			    	</div>
			    	</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="resetPayModal()">取消</button>
					<button type="button" class="btn btn-primary" onclick="edit()">提交</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="mapAddPayModal" tabindex="-1" role="dialog">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content" style="height: 530px;">
	      <div class="modal-header">
	        <h4 class="modal-title">Modal title</h4>
	      </div>
	      <div class="modal-body" style="height: 410px;">
	        <iframe name="mainFrame" id="mainFrame" src="/gradesign/map/mapIndex" frameborder="false" scrolling="yes" style="border:none;" width="100%" height="100%" allowtransparency="true"></iframe>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/gradesign/js/console/pay.js"></script>
</html>